<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />




    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../content/plugin/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap-switch.css">
    <script src="../content/plugin/bootstrap/js/bootstrap-switch.js"></script>


<body>
    <div class="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">商城管理</a>>
                <a href="">优惠券</a>
            </span>


        </div>
        <div class="x-body">
            <div class="layui-row">


                <input type="text" v-model="search.name" name="username" placeholder="请输入优惠券名称"
                    style="width: 120px;height:30px;;" autocomplete="off">
                <button class="layui-btn" @click="getdata"><i class="layui-icon">&#xe615;</i></button>

            </div>
            <hr />
            <div>

                <button class="layui-btn" v-on:click="add"><i class="layui-icon"></i>添加</button>

            </div>
            <hr />
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" />
                            </th>
                            <th class="table-title">类型</th>
                            <th class="table-title">优惠券名称</th>
                            <th class="table-title">概述</th>



                            <th class="table-type">满</th>
                            <th class="table-type">减</th>
                            <th class="table-type">折扣</th>
                            <th class="table-type">有效期</th>

                            <th class="table-type">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="uitem in arrayData">
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>
                                <span v-if="uitem.type==1">代金券</span>
                                <span v-if="uitem.type==2">折扣卷</span>
                            </td>


                            <td>{{uitem.name}}</td>
                            <td>{{uitem.descs}}</td>

                            <!-- <td>{{uitem.num}}</td> -->

                            <td>{{uitem.man}}</td>
                            <td>{{uitem.jian}}</td>
                            <td>{{uitem.zhekou}}</td>
                            <td>{{uitem.endtime}}</td>




                            <td class="td-manage">

                                <a title="编辑" v-on:click="vupdate(uitem)" href="javascript:;">
                                    <i class="layui-icon"></i>
                                </a>
                                <a title="删除" v-on:click="vdel(uitem)" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="page">
                <div>
                    <vue-nav :cur="search.page" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                </div>
            </div>

        </div>


        <!--添加-->
        <div class="modal fade" id="addbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加信息</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>
                            <div class="control-group">
                                <label for="input01" class="control-label">标题</label>
                                <div class="controls">
                                    <input placeholder="" type="text" id="title" class="form-control"
                                        v-model="addobj.name">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">概述</label>
                                <div class="controls">
                                    <input placeholder="" type="text" id="contents" class="form-control"
                                        v-model="addobj.descs">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">劵类型</label>
                                <div class="controls">
                                    <select type="text" required="required" class="form-control" @change="typchange"
                                        v-model="addobj.type">


                                        <option v-for="item in couponlist" :value='item.id'>
                                            {{item.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>


                            <div class="control-group">
                                <label for="input01" class="control-label">满</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="addobj.man"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">减</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="addobj.jian"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">折扣</label>
                                <div class="controls">
                                    <input placeholder="请输入折扣" type="text" class="form-control" v-model="addobj.zhekou"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">有效期(月)</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="addobj.endtime"
                                        value="">
                                </div>
                            </div>
                    </div>

                    </fieldset>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" v-on:click="insert()">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!--修改-->
        <div class="modal fade" id="editbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>
                            <div class="control-group">
                                <label for="input01" class="control-label">标题</label>
                                <div class="controls">

                                    <input placeholder="" type="text" class="form-control" v-model="editobj.name">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">概述</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.des">
                                </div>
                            </div>

                            <div class="control-group">
                                <label for="input01" class="control-label">劵类型</label>
                                <div class="controls">
                                    <select type="text" required="required" class="form-control" @change="typchange"
                                        v-model="editobj.type">


                                        <option v-for="item in couponlist" :value='item.id'>
                                            {{item.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="control-group">
                                <label for="input01" class="control-label">满</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.man"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">减</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.jian"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">折扣</label>
                                <div class="controls">
                                    <input placeholder="请输入折扣" type="text" class="form-control" v-model="editobj.zhekou"
                                        value="">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">有效期(月)</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.endtime"
                                        value="">
                                </div>
                            </div>

                        </fieldset>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" v-on:click="update()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--修改结束-->


        <div class="modal fade" id="choosegoods" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width:80%;">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">选择商品</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>


                            <div>
                                名称：
                                <input type="text" v-model="goodsearch.goodname" placeholder="" autocomplete="off"
                                    style="height:30px;width: 100px;">



                                <button class="layui-btn" v-on:click="getgoodslist"><i
                                        class="layui-icon">&#xe615;</i></button>
                            </div>
                            <div class="control-group">
                                <div style="height:200px;overflow: auto; ">
                                    <table class="layui-table">

                                        <thead>
                                            <tr>

                                                <td>名称</td>
                                                <td>单位</td>
                                                <td>单价</td>
                                                <td>费用类型</td>
                                                <td style="width:57px;">操作</td>
                                            </tr>
                                            <tr v-for="item in goodlist" v-cloak>

                                                <td>{{item.name}}</td>
                                                <td>{{item.unit}}</td>
                                                <td>{{item.price}}</td>
                                                <td>{{item.type}}</td>
                                                <td>
                                                    <a @click="chooseitem(item)">选择</a>
                                                </td>
                                            </tr>

                                        </thead>

                                    </table>
                                </div>

                            </div>



                        </fieldset>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" v-on:click="insertzengsong()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
    <!--添加结束-->

</body>


<script src="../content/js/config.js"></script>

<link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
<script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
<script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../content/js/vue2.js"></script>
<script src="../content/js/vue-nav.js"></script>

<script>


    var vm = new Vue({
        el: ".app",
        data: {
            all: 0,
            arrayData: [],
            allcount: 0,
            menulist: [],
            addobj: {
            },
            editobj: {},
            search: {
                page: 1,
                size: 10,
                bigtype: "app",
            },
            couponlist: [{ "id": 1, "name": "优惠券" }, { "id": 2, "name": "折扣卷" }],
            goodlist: [],
            goodsearch: {
                page: 1, rows: 999,
                classify: 0
            },
            goods: "",
            bigtype: "app"
        },
        components: {
            'vue-nav': Vnav
        },
        methods: {
            choosetype: function (value) {

                this.bigtype = value;

                this.getdata();
            },
            typchange: function () {

                if (this.addobj.content == "goods") {
                    this.getgoodslist();
                    $("#choosegoods").modal('show');
                }

            },
            chooseitem: function (uitem) {
                this.goods = uitem;
                $("#choosegoods").modal('hide');
            },
            getgoodslist() {
                var self = this;
                $.post(apiurl + "/myapp/goodlist", this.goodsearch, function (_result) {
                    console.log(_result);
                    self.goodlist = _result.data;

                });
            },
            add: function () {
                this.addobj = {};

                $("#addbox").modal('show');
            },
            insert: function () {
                var self = this;
                this.addobj.id = "";


                $.post(apiurl + "/admin/coupon/add", this.addobj, function (data) {
                    if (data.status == 200) {
                        $("#addbox").modal('hide');
                        swal("success", "添加成功", "success");
                        self.getdata("");
                    } else {
                        swal("系统提示", data.message, "error");
                    }

                });
            },
            getdata: function (event) {  //查询数据

                var self = this;
                this.search.bigtype = this.bigtype;
                $.post(apiurl + "/admin/coupon/list", this.search, function (_result) {
                    console.log(_result);

                    self.arrayData = _result.data;
                    self.all = _result.count;
                    self.allcount = _result.allcount;


                });

            },
            callback: function (data) {
                var self = this;
                this.search.page = data;
                this.search.bigtype = this.bigtype;
                $.post(apiurl + "/admin/coupon/list", this.search, function (_result) {
                    self.arrayData = _result.data;
                    self.all = _result.count;
                    self.allcount = _result.allcount;
                });
            },
            vupdate: function (uitem) {


                setTimeout(() => {
                    this.editobj = uitem;
                    console.log("haoqig", uitem);
                }, 1000);

                $("#editbox").modal('show');

            },
            update: function () {
                var self = this;

                this.editobj.token = json.token;
                $.post(apiurl + "/admin/coupon/edit", this.editobj, function (data) {
                    if (data.status == 200) {
                        $("#editbox").modal('hide');
                        swal("success", "修改成功", "success");
                        self.getdata("");
                    } else {
                        swal("系统提示", data.message, "error");
                    }

                });

            },
            vdel: function (uitem) {

                var self = this;
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: '否',
                    closeOnConfirm: false
                }, function () {


                    $.ajax({
                        url: apiurl + '/admin/coupon/del',
                        type: 'DELETE',
                        data: { "id": uitem.id, token: json.token },
                        success: function (result) {
                            if (result.status == 200) {
                                swal("系统提示", "已删除", "success");
                                self.getdata("");
                            } else {
                                swal("系统提示", "系统异常", "success");
                            }
                        }
                    });

                });
            },


        },
        created: function () {  //初始化事件里边去调用查询方法
            this.getdata("");



        }
    });


</script>